<template>
  <div class="bmd-pop">
    <popup :isShow.sync="showBmdPop"
            title="活动优惠"
            :closeable="false"
            titleBorder="noBorder"
            confirmText="我知道了"
            @confirm="confirm">
      <template slot="content">
        <div class="bmd-con">
          <div class="bmd-list">
            <div class="bmd-item" v-for="(item,index) in bmdList" :key="index">
              <div class="bmd-left">
                <span class="icon">{{item[0]}}</span>
                <span class="text">{{item[1]}}</span>
              </div>
              <div class="bmd-right">-¥{{item[2]}}</div>
            </div>
          </div>
          <div class="bmd-total">合计：-¥{{bmdTotal}}</div>
        </div>
      </template>
    </popup>
  </div>
</template>

<script>
import Vue from 'vue'
import popup from '@/components/popup'

export default Vue.extend({
  components: {
    popup
  },
  props: {
    bmdList: {
      type: Array,
      default() {
        return []
      }
    },
    bmdTotal: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showBmdPop: false
    }
  },
  methods: {
    confirm(callback) {
    }
  }
})
</script>

<style lang="scss">
.bmd-pop{
  // padding: 70px 0 140px 0;
  .bmd-con{
    height:610px;
    margin-top:8px;
    padding:0 48px;
    .bmd-list{
      max-height:480px;
      overflow-y:auto;
    }
    .bmd-item{
      display:flex;
      justify-content: space-between;
      padding: 16px 0;
      .icon{
        padding:4px 18px;
        border-radius:20px;
        font-size:20px;
        color:#FF4D4F;
        background:#FFCCC7;
      }
      .text{
        margin-left:16px;
      }
    }
    .bmd-total{
      border-top:2px solid #E9E9E9;
      margin-top:16px;
      padding:40px 0;
      font-size:28px;
      text-align:right;
    }
  }
}
</style>